<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 375px;
            margin: 0px;
            padding: 0;
        }
        .top{
            background-color: #00B51D;
            padding-bottom: 20px;
        }
        .top-title{
            color: #fff;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .top-search{
            display: block;
            width: 340px;
            height: 32px;
            line-height: 32px;
            margin: 0 auto;
            border-radius: 4px;
            outline: none;
            border: none;
            
        }
        .theaters{
            margin-left: 75px;
        }
        .item{
            float: left;
        }
        .mov-pic{
            display: block;
            width: 75px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="top">
        <p class="top-title">首页</p>
        <input class="top-search" type="text" placeholder="搜索">
    </div>
    <div class="content">
        <div class="theaters">
            <span>影院热映</span>
            <span>查看更多</span>
            <div class="movse-list"></div>
        </div>
    </div>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/xhr.js"></script>
    <script>
        $(function(){
            let arr = [
                {
                "rating": {
                    "max": 10,
                    "average": 7.0,
                    "details": {
                    "1": 402.0,
                    "3": 11672.0,
                    "2": 2271.0,
                    "5": 3328.0,
                    "4": 10224.0
                    },
                    "stars": "35",
                    "min": 0
                },
                "genres": ["剧情", "动作"],
                "title": "叶问4：完结篇",
                "casts": [{
                    "avatars": {
                    "small": "https://img9.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p10695.jpg",
                    "large": "https://img9.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p10695.jpg",
                    "medium": "https://img9.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p10695.jpg"
                    },
                    "name_en": "Donnie Yen",
                    "name": "甄子丹",
                    "alt": "https:\/\/movie.douban.com\/celebrity\/1025194\/",
                    "id": "1025194"
                }, {
                    "avatars": {
                    "small": "https://img9.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p45924.jpg",
                    "large": "https://img9.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p45924.jpg",
                    "medium": "https://img9.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p45924.jpg"
                    },
                    "name_en": "Yue Wu",
                    "name": "吴樾",
                    "alt": "https:\/\/movie.douban.com\/celebrity\/1314321\/",
                    "id": "1314321"
                }, {
                    "avatars": {
                    "small": "https://img3.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p1366445006.32.jpg",
                    "large": "https://img3.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p1366445006.32.jpg",
                    "medium": "https://img3.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p1366445006.32.jpg"
                    },
                    "name_en": "Vanness Wu",
                    "name": "吴建豪",
                    "alt": "https:\/\/movie.douban.com\/celebrity\/1201063\/",
                    "id": "1201063"
                }],
                "durations": ["107分钟"],
                "collect_count": 221693,
                "mainland_pubdate": "2019-12-20",
                "has_video": true,
                "original_title": "葉問4",
                "subtype": "movie",
                "directors": [{
                    "avatars": {
                    "small": "https://img1.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p1524904218.27.jpg",
                    "large": "https://img1.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p1524904218.27.jpg",
                    "medium": "https://img1.doubanio.com\/view\/celebrity\/s_ratio_celebrity\/public\/p1524904218.27.jpg"
                    },
                    "name_en": "Wilson Yip",
                    "name": "叶伟信",
                    "alt": "https:\/\/movie.douban.com\/celebrity\/1274472\/",
                    "id": "1274472"
                }],
                "pubdates": ["2019-12-20(中国大陆)"],
                "year": "2019",
                "images": {
                    "small": "https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2577437186.jpg",
                    "large": "https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2577437186.jpg",
                    "medium": "https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2577437186.jpg"
                },
                "alt": "https:\/\/movie.douban.com\/subject\/26885074\/",
                "id": "26885074"
                }
            ]
            //console.log(arr.length);

            $('.top-search').click(function(){
                $.ajax({
                    url:new_movies,
                    success:function(res){
                        //console.log(res.subjects)
                        let arr=res.subjects
                        let text=''
                        for(let i=0;i<arr.length;i++){
                            text +=
                            `<div class="item">
                                <img class="mov-pic" src=${arr[i].images.small} alt="">
                                <span>${arr[i].title}</span>
                            </div>`
                        }
                        $('.movse-list').html(text);
                    }
                })
            })
        })
    </script>
</body>
</html>